setHeader() Method |
This method applies a new header node to a Collapsible element. If a header is already present, it is overwritten by the new one. The left and right caption nodes are also updated. The old header is removed if it is an auto-generated header. However, an old custom header is not removed.
Syntax
collapsibleID.setHeader(sHeaderId, sLeftCaptionId, sRightCaptionId)
Parameters
| sHeaderId | Required. Refers to an object or string that denotes the ID of the new header. |
| sLeftCaptionId | Optional. Refers to an object or string that denotes the ID of the new left caption node. |
| sRightCaptionId | Optional. Refers to an object or string that denotes the ID of the new right caption node. |
Remarks
The header node must always be defined outside the Collapsible element. It cannot be a child element of the Collapsible element.
Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>collapsibleSetHeader</title>
<script src="/cordys/wcp/application.js"></script>
<style>
.myHeader01
{
border:1px solid ridge;
background-color:steelBlue;
color:white;
}
.myHeader01 div
{
display:inline;
width:45%;
}
.myHeader02
{
border:1px solid ridge;
background-color:orange;
}
.myHeader02 div
{
display:inline;
width:45%;
}
</style>
<script type="text/javascript">
function setHeader()
{
document.getElementById("collap").setHeader("myHeaderId02","leftHeaderId02","rightHeaderId02");
}
</script>
</head>
<body>
<h4>Collapsible setHeader test page</h4>
<div style="width:600px;">
<div id="myHeaderId02" class="myHeader02">
<div id="leftHeaderId02">Alternative header left</div>
<div id="rightHeaderId02">right</div>
</div>
<div id="myHeaderId01" class="myHeader01">
<div id="leftHeaderId01">leftHeader caption</div>
<div id="rightHeaderId01">rightHeader caption</div>
</div>
<div id="collap"
class="collapsible"
collapsibleHeader="myHeaderId01"
leftCaption="leftHeaderId01"
rightCaption="rightHeaderId01"
expanded="true"
style="border:1px solid lightBlue;">
<div>sample 2</div>
<div>sample 3</div>
<div>sample 4</div>
</div>
</div>
<br />
<button onclick="setHeader()">switch header</button>
</body>
</html>